<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.pollix.at/thymeleaf/shiro">
<head>
    <title>修改订单</title>
    <!-- 这儿引用单独的css link -->
    <!-- Ladda for Bootstrap 3按钮加载进度插件 -->
    <link rel="stylesheet" th:href="@{/static/admin/assets/js/button/ladda/ladda.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/admin/assets/css/bootstrap.css}">
    <style>
        *{
            font-size: 15px;
        }
        button{
            font-size: 15px!important;;
        }
        body{
            background: url("/static/login/images/banner_slide_02.jpg");
        }
        .top{
            padding-top: 15%;
        }
        .container{
            margin-left: auto;
            margin-right: auto;
            width: 88%;
            margin-top: 10px;
        }
        .tb_tr div{
            width: 25%;
            line-height: 40px;
            text-align: -webkit-center;
        }
        table tr{
            height: 80px;
        }
        td{
            padding: 22px 0px!important;
            text-align: center;
        }
        th{
             padding: 22px 0px!important;
             width: 50px;
             text-align: center;
         }
    </style>
</head>
<body>

<div class="top">
    <div class="container">
        <div style="display: flex;justify-content: space-around;">
            <div class="" style="width: 80%;">
                <input type="text" id="money" class="form-control" placeholder="金额" style="height: 56px;">
            </div>
            <button type="submit" onclick="getDataByMoney();" class="btn btn-default" style="width: 15%;">查询</button>
        </div>
    </div>
    <div class="container">
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">未处理订单</div>

            <!-- Table -->
            <table class="table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>类型</th>
                        <th>金额</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="content">
                </tbody>
            </table>
        </div>
    </div>
</div>
<script th:src="@{/static/js/jquery-1.7.2.js}"></script>
<!-- 弹窗 -->
<script th:src="@{/static/admin/assets/js/layer/layer.js}" type="text/javascript"></script>
<!-- 遮罩层 -->
<script th:src="@{/static/admin/assets/js/blockUI/jquery.blockUI.js}" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        getDataByMoney();
    });

    function getDataByMoney() {
        var money = $("#money").val();
        var params = {"searchTxt": money, "pageSize": 5};
        $.ajax({
            url: "/pay/update/list",
            data: params,
            dataType: 'json',
            type: 'POST',
            async: false
        }).done(function(json) {
            var tbody = '';
            $.each(json,function(n,value) {
                var trs = '';
                trs += '<tr>';
                trs += '<th scope="row">' + (n + 1) + '</th>';
                trs += '<td>' + value.payType + '</td>';
                trs += '<td>' + value.money + '</td>';
                trs += '<td>' + getMyDate(value.createDate) + '</td>';
                trs += '<td>';
                trs += '<button type="button" onclick="updateOrder(\'' + value.id + '\');" class="btn btn-success btn-xs">支付成功</button>';
                trs += '</td>';
                trs += '</tr>';
                tbody += trs;
            });
            $("#content").html(tbody);
        });
        $("#money").val("");
    }

    function updateOrder(id) {

        layer.confirm('你确定修改订单吗？', {
            btn: ['确定','取消'] //按钮
        }, function(){
            $.ajax({
                url: "/PayOrderController/update?id=" + id,
                type: 'POST',
                async: false
            }).done(function(json) {
                if(json.code == 200){
                    layer.msg("修改成功");
                    getDataByMoney();
                }
            });
        }, function(){
            layer.close();
        });
    }

    function getMyDate(str){
        var oDate = new Date(str),
            oYear = oDate.getFullYear(),
            oMonth = oDate.getMonth()+1,
            oDay = oDate.getDate(),
            oHour = oDate.getHours(),
            oMin = oDate.getMinutes(),
            oSen = oDate.getSeconds(),
            oTime = oYear +'-'+ getzf(oMonth) +'-'+ getzf(oDay) +' '+ getzf(oHour) +':'+ getzf(oMin) +':'+getzf(oSen);//最后拼接时间
        return oTime;
    }
    function getzf(num){
        if(parseInt(num) < 10){
            num = '0'+num;
        }
        return num;
    }
</script>
</body>
</html>
